<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ref的回调写法的小问题</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			/* 
				关于回调ref的这个回调调用次数的问题：
						1.如果写的是内联的：调用两次（差一点）
						2.如果写在了类中以方法的形式出现：只会在初次渲染时调用一次（好一点）
						备注：没得所谓
			
			*/
			//定义一个组件
			class Demo extends React.Component{
				//初始化状态
				state = {sum:0}
				render(){
					console.log('---render---')
					return (
						<div>
							<input ref={c => {console.log('#',c); this.inpt = c}} type="text"/>	&nbsp;
							<button onClick={this.showMsg}>点我提示左侧数据</button>&nbsp; 
							<br/>
							<br/>
							<h2>当前求和为：{this.state.sum}</h2>
							<button onClick={this.add}>+1</button>&nbsp;
						</div>
					)
				}

				/* saveNode = (c)=>{
					console.log('#')
					this.inpt1 = c
				} */

				showMsg = ()=>{
					alert(this.inpt1.value)
				}

				add = ()=>{
					const {sum} = this.state
					this.setState({sum:sum+1})
				}
			}
			//渲染组件到页面
			ReactDOM.render(<Demo/>,document.getElementById('root'))
		</script>
	</body>
</html>